<template>
  <div
    class="smart-circle"
    @mousedown="startDrag"
    :style="{ transform: `translate(${translateX}px, ${translateY}px)` }"
  >
    <div class="loader"></div>
    <div class="text">智能诊断</div>

    <div v-if="showPopup" class="popup">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: "SmartLoader",
  props: {
    text: String,
  },
  data() {
    return {
      isDragging: false,
      originalX: 0,
      originalY: 0,
      translateX: 0,
      translateY: 0,
      showPopup: false, // 控制提示框的显示
    };
  },

  watch: {
    text(newValue) {
      if (newValue) {
        this.showPopup = true;
        setTimeout(() => {
          this.showPopup = false; // 提示框显示30秒后自动关闭
        }, 30000);
      }
    },
  },

  mounted() {
    window.addEventListener("mousemove", this.onDrag);
    window.addEventListener("mouseup", this.stopDrag);
  },
  beforeDestroy() {
    window.removeEventListener("mousemove", this.onDrag);
    window.removeEventListener("mouseup", this.stopDrag);
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.originalX = event.clientX - this.translateX;
      this.originalY = event.clientY - this.translateY;
      event.preventDefault();
    },
    onDrag(event) {
      if (this.isDragging) {
        let newX = event.clientX - this.originalX;
        let newY = event.clientY - this.originalY;
        this.translateX = newX;
        this.translateY = newY;
      }
    },
    stopDrag() {
      this.isDragging = false;
    },
  },
};
</script>

<style scoped>
.loader {
  --s: 5px;
  /* control the size */
  width: calc(9 * var(--s));
  display: grid;
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask: radial-gradient(
    50% 50%,
    #0000 calc(99% - 2 * var(--s)),
    #000 calc(101% - 2 * var(--s))
  );
  animation: r 10s linear infinite;
}

.loader:before {
  content: "";
  /* adjust the colors below */
  background: conic-gradient(
    from 25deg,
    #f8a201 25%,
    #fa2402 0 50%,
    #fdb3b0 0 75%,
    #02dde1 0
  );
  -webkit-mask:
    repeating-conic-gradient(#0000 0 25deg, #000 23% 25%),
    radial-gradient(var(--s) at var(--s) 50%, #000 97%, #0000)
      left/calc(100% - 2 * var(--s)) 100% repeat-x,
    radial-gradient(var(--s) at 50% var(--s), #000 97%, #0000) top / 100%
      calc(100% - 2 * var(--s)) repeat-y;
}

@keyframes r {
  to {
    transform: rotate(1turn);
  }
}

.text {
  font-size: 0.8em;
  color: rgb(129, 120, 120);
  text-align: center;
  margin-top: 0.4em;
  padding-right: 25px;
  font-weight: 500;
  width: 80px;
}

.popup {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  z-index: 1050;
}
</style>
